<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>子账号管理</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
		display: none!important;
	}
	.my-over-close {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		cursor: pointer;
	}
	.add-account-confirm-btn {
		width: 120px;
		height:35px;
		border-radius:4px;
		color:#ffffff;
		background-color:#007AFF;
		line-height:35px;
		text-align:center;
		cursor:pointer;
		display: inline-block;
		border: #007AFF 1px solid;
	}
	.add-account-confirm-btn:hover {
		opacity: .5;
		transition: 1s;
	}
	.cancel-add-account-confirm-btn {
		width: 120px;
		height:35px;
		border-radius:4px;
		line-height:35px;
		text-align:center;
		cursor:pointer;
		display: inline-block;
		border: 1px solid #eee;
		margin-right: 25px;
	}
	.cancel-add-account-confirm-btn:hover {
		opacity: .5;
		transition: 1s;
	}
	.get-code-btn {
		cursor: pointer;
		background-color: #007AFF;
		height: 30px;
		width: 100px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		position: absolute;
		top: 5px;
		left: 150px;
		border-radius: 4px;
		box-sizing: border-box;
	}
	.my-btn {
		cursor: pointer;
	}
</style>
</head>
<body>
	<div id="app" v-cloak>
		<header>
		</header>
		<div class="header-space"></div>
		<section class="section451">
			<div class="content">
				<div class="time">更新时间 {{updateTime}}</div>
				<div class="list">
					<div class="item">
						<h3>累计招聘岗位</h3>
						<div class="con"><i class="akrobat">{{summaryData.recruit_all}}</i><img src="images/icon451-1.png" alt="" class="icon"></div>
					</div>
					<div class="item">
						<h3>累计收获简历</h3>
						<div class="con"><i class="akrobat">{{summaryData.resume_all}}</i><img src="images/icon451-2.png" alt="" class="icon"></div>
					</div>
					<div class="item">
						<h3>累计沟通人数</h3>
						<div class="con"><i class="akrobat">{{summaryData.communicate_all}}</i><img src="images/icon451-3.png" alt="" class="icon"></div>
					</div>
					<div class="item">
						<h3>待处理</h3>
						<div class="con"><i class="akrobat">{{summaryData.be_handle}}</i><img src="images/icon451-4.png" alt="" class="icon"></div>
					</div>
					<div class="item">
						<h3>待面试</h3>
						<div class="con"><i class="akrobat">{{summaryData.be_interview}}</i><img src="images/icon451-5.png" alt="" class="icon"></div>
					</div>
					<div class="item">
						<h3>已录用</h3>
						<div class="con"><i class="akrobat">{{summaryData.accept}}</i><img src="images/icon451-6.png" alt="" class="icon"></div>
					</div>
				</div>
			</div>
		</section>
		<section class="section452">
			<div class="content">
				<div class="filter">
					<div class="left">
						<a href="javascript:void(0)" @click="handleAddAccount" class="btn">添加子账号</a>
						<a href="javascript:void(0)" class="btn btn-white" @click="outPutData">导出</a>
					</div>
					<div class="right">
						<span>统计时间：</span>
						<el-date-picker
								v-model="dateTime"
								type="datetimerange"
								range-separator="-"
								value-format="yyyy-MM-dd HH:mm:ss"
								start-placeholder="最早"
								end-placeholder="最晚"
								prefix-icon="none"
								@change="handleDateTimeChange"
							>
						</el-date-picker>
						<div class="btn my-btn" @click="searchList">搜索</div>
						<div class="btn btn-white my-btn" @click="clearDate">清除</div>
					</div>
				</div>
			</div>
		</section>
		<section class="section453" style="min-height: 500px;">
			<div class="content">
				<div class="table">
					<table>
						<tr>
							<th></th>
							<th>添加时间</th>
							<th>账号状态</th>
							<th>活跃天数</th>
							<th>平均在线/周</th>
							<th>最近登录时间</th>
							<th>发布职位</th>
							<th>接收简历</th>
							<th>浏览简历</th>
							<th>沟通人数</th>
							<th>待处理</th>
							<th>待面试</th>
							<th>已录用</th>
							<th>操作</th>
						</tr>

						<tr v-for="(item, index) in accountList" :key="item.id">
							<td><img :src="item.logo" alt="" class="face"><a href="" class="blue">{{item.name}}</a></td>
							<td>{{item.user.created_at}}</td>
							<td>{{item.status == 1 ? '正常' : item.status == 0 ? '已禁用' : ''}}</td>
							<td>{{item.user_log_action.active_days}}天</td>
							<td>{{item.user_log_action.online ? item.user_log_action.online : '暂无记录'}}</td>
							<td>{{item.user.login_time ? item.user.login_time : '暂无记录'}}</td>
							<td>{{item.user_log_action.publish}}个</td>
							<td>{{item.user_log_action.accept}}份</td>
							<td>{{item.user_log_action.browse_resume}}人</td>
							<td>{{item.user_log_action.communicate}}人</td>
							<td>{{item.user_log_action.handle}}份</td>
							<td>{{item.user_log_action.interview}}人</td>
							<td>{{item.user_log_action.employed}}人</td>
							<td>
								<label @click="forbiddenAccount(index)" for="" :class="[item.status == 1 ? '' : item.status == 0 ? 'on' : '' ,'radio']">禁用</label>
								<p><a href="javascript:void(0);" @click="handleEditAccount(index)"  class="blue">编辑</a><a href="javascript:void(0)" @click="handleShowDeleteToast(index)" class="red">删除</a></p>
							</td>
						</tr>
						
					</table>
				</div>
				<div class="g-prvNxt" v-if="accountList.length > 0">
					<a @click="getPage('pre')" href="javascript:void(0)" class="prev">&nbsp;</a>
					<a @click="getPage(item)" v-for="(item, i) in allPage" href="javascript:void(0)" :class="{on: page==item}">{{item}}</a>
					<a @click="getPage('next')" href="javascript:void(0)" class="next">&nbsp;</a>
					<select name="" id="pageSize">
						<option value="10">10条/页</option>
						<option value="20">20条/页</option>
						<option value="">30条/页</option>
						<option value="">40条/页</option>
						<option value="">50条/页</option>
					</select>
					跳至 
					<input type="text" value="" id="pageVal" class="input">
					页
					<input @click="changePage" type="submit" style="line-height: 32px;" value="确定" class="btn">
				</div>
			</div>
		</section>
		<!-- <div class="alert alert-statistics show" v-if="ifShowDialog">
			<div class="my-over-close" @click="ifShowDialog = false"></div>
			<div class="box">
				<div class="title">
					<h3>人员招聘统计</h3>
					<p>统计时间：2019.01.11-2019.02.09</p>
				</div>
				<div class="user">
					<img src="images/face.jpg" alt="" class="face">
					<h3>李小双</h3>
					<p>APICloud·移动互联网·柚子（北京）移动技术有限公司</p>
				</div>
				<div class="table">
					<table>
						<tr class="linear">
							<th>活跃天数</th>
							<th>平均在线/周</th>
							<th>最近登录时间</th>
							<th>发布招聘</th>
							<th>发布职位</th>
						</tr>
						<tr>
							<td>22天</td>
							<td>3h/天</td>
							<td>2019-12-01 <br>12：30</td>
							<td>38条</td>
							<td>12个</td>
						</tr>
					</table>
					<table>
						<tr class="linear">
							<th>接收简历</th>
							<th>浏览简历</th>
							<th>沟通人数</th>
							<th>待处理</th>
							<th>待面试</th>
							<th>已录用</th>
						</tr>
						<tr>
							<td>1928份</td>
							<td>3h/天</td>
							<td>25人</td>
							<td>2人</td>
							<td>11人</td>
							<td>2人</td>
						</tr>
					</table>
				</div>
				<div class="code">
					<img src="images/code1.png" alt="">
					<p>扫描二维码下载“人员招聘企业端app”</p>
				</div>
			</div>
		</div> -->
		<!-- 删除确认弹窗 -->
		<div
			v-if="showDeleteToast"
			class="alert alert-conform show"
		>
			<div class="my-over-close" @click="showDeleteToast = false"></div>
			<div class="box">
				<div class="title">提示</div>
				<div class="con">确定要删除吗？</div>
				<div class="operate">
					<a href="javascript:void(0);" class="btn btn-white" @click="showDeleteToast = false">取消</a>
					<a href="javascript:void(0);" class="btn" @click="confirmDelete">确定</a>
				</div>
			</div>
		</div>
		<!-- 新增/编辑子账号弹窗 -->
		<el-dialog :title="ifAddAccount ? '添加子账号' : '编辑子账号'" :visible.sync="showAddAccountPop">
			<el-form :model="addAccountParam">
				<el-form-item label="手机号" :label-width="formLabelWidth">
					<el-input id="mobile" placeholder="请填写手机号" v-model="addAccountParam.account" autocomplete="off" @input="handleMobileInput" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input type="password" placeholder="6-16位 字母+数字" v-model="addAccountParam.password" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="用户名称" :label-width="formLabelWidth">
					<el-input placeholder="请填写用户名称" v-model="addAccountParam.name" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="验证码" :label-width="formLabelWidth" style="position: relative;">
					<el-input placeholder="请填写验证码" v-model="addAccountParam.code" @input="handleCodeInput" autocomplete="off" style="width: 250px;" >	
					</el-input>
					<div class="get-code-btn btn-yzm" @click="getCode">获取验证码</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div @click="showAddAccountPop = false" class="cancel-add-account-confirm-btn">取 消</div>
				<div @click="addAccount" class="add-account-confirm-btn">确 定</div>
			</div>
		</el-dialog>
		<footer id="footer"></footer>
	</div>	
	<script src="js/jquery.min.js"></script>
	<script src="js/slide.min.js"></script>
	<script src="js/polyfill.min.js"></script>
	<script src="js/jquery.nicescroll3.7.6.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="js/request.js"></script>
	<script>
		$(function(){
			$("header").load("./enterpriseCommon/header.html");
			$("#footer").load("./enterpriseCommon/footer.html");
		})
	</script>
	<script>
		var rules = {
			account: {
				test: function(val) {
					return /^1[3|4|5|7|8]\d{9}$/.test(val)
				},
				msg: '请正确填写手机号'
			},
			password: {
				test: function(val) {
					return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)
				},
				msg: '密码必须6-16位，字母+数字'
			},
			name: {
				test: function(val) {
					return val !== ''
				},
				msg: '姓名必须填写'
			},
			code: {
				test: function(val) {
					return val !== ''
				},
				msg: '验证码必须填写'
			}
		};
		var vm = new Vue({
			el: '#app',
			data: function() {
				return  {
					// ifShowDialog: false,
					dateTime: [], // 筛选起始结束时间
					start: '', // 筛选开始时间
					end: '', // 筛选结束时间
					ifAddAccount: true,
					formLabelWidth: '120px',
					showDeleteToast: false,
					showAddAccountPop: false,
					nowClickPos: 0,
					accountList: [],
					page: 1,
					allPage: [],
					paegSize: 10,
					addAccountParam: {
						account: '',
						password: '',
						name: '',
						code: ''
					},
					summaryData: {},
					updateTime: ''
				}
			},
			mounted() {
				this.fetchChildAccountList();
				this.fetchDataAnalysis();
				this.getNowTime();
			},
			methods: {
				handleAddAccount() {
					this.ifAddAccount = true;
					this.showAddAccountPop = true;
					this.clearFormData();
				},
				getCode() {
          var vm = this
          if ($(".btn-yzm").hasClass("disabled")) {
            return false
          }
					var flag = /^1[3|4|5|7|8]\d{9}$/.test(this.addAccountParam.account);
          if (flag) {
            // type 1 为登录 2 为注册 3 为忘记密码 4 添加子账号
            request('person/user/sms', 'POST', JSON.stringify({
              account: this.addAccountParam.account,
              type: 4
            }), function (res) {
              timeClock($(".btn-yzm"));
              vm.$message.success(res.message);
            }, function (err) {
              vm.$message.error(err.message);
            })
          } else {
						vm.$message.error('请正确填写手机格式');
					}
        },
				handleDateTimeChange: function(e) {
					// console.log(e);
					this.start = e[0];
					this.end = e[1];
				},
				handleCodeInput() {
					if (this.addAccountParam.code.length > 6) {
            this.addAccountParam.code = this.addAccountParam.code.substring(0, 6);
          }
				},
				handleMobileInput() {
					if (this.addAccountParam.account.length > 11) {
            this.addAccountParam.account = this.addAccountParam.account.substring(0, 11);
          }
				},
				fetchChildAccountList() {
					var vm = this;
					request('enterprise/employee/list', 'GET', {
						page: this.page
					}, function(res) {
            console.log(res);
						vm.accountList = res.data.recruit;
						var allPage = Math.ceil(res.data.total / vm.paegSize);
						var pages = [];
						for(var i = 1; i <= allPage; i++){
							pages.push(i);
						}
						vm.allPage = pages;
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
          })
				},
				clearDate() {
					this.dateTime = '';
				},
				searchList() {
					this.$message.warning('缺少接口');
				},
				// 添加/修改子账号
				addAccount() {
					var vm = this;
					var loading = this.$loading({
						lock: true,
						text: '提交中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					var isPass = Object.keys(rules).every(function(key) {
						var val = this['addAccountParam'][key];
						var rule = rules[key];
						var result = rule.test(val);
						if (!result) {
							loading.close();
							this.$message({
								type: 'warning',
								message: rule.msg
							})
						}
						return result
					}, this);
					if (!isPass) return;
					if(this.ifAddAccount) {
						request('enterprise/employee/add', 'POST', JSON.stringify({
							account: this.addAccountParam.account,
							password: this.addAccountParam.password,
							name: this.addAccountParam.name,
							code: this.addAccountParam.code
						}), function(res) {
							// console.log(res);
							vm.showAddAccountPop = false;
							vm.$message.success(res.message);
							loading.close();
							vm.page = 1;
							vm.fetchChildAccountList();
						}, function(err) {
							var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
							vm.$message.warning(msg);
							loading.close();
						})
					} else {
						this.editAccount();
					}
				},
				handleEditAccount(pos) {
					this.clearFormData();
					this.ifAddAccount = false;
					this.nowClickPos = pos;
					this.showAddAccountPop = true;
					this.getAccountDetail();
				},
				// 获取子账号详情
				getAccountDetail() {
					var vm = this;
					request('enterprise/employee/detail/' + this.accountList[this.nowClickPos].id, 'GET', '', function(res) {
						console.log(res);
						vm.addAccountParam.name = res.data.name;
						vm.addAccountParam.account = res.data.tel;
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
          })
				},
				// 编辑子账号
				editAccount() {
					var vm = this;
					request('enterprise/employee/update/' + this.accountList[this.nowClickPos].id, 'PUT', JSON.stringify({
						account: this.addAccountParam.account,
						password: this.addAccountParam.password,
						name: this.addAccountParam.name,
						code: this.addAccountParam.code
					}), function(res) {
            console.log(res);
						vm.showAddAccountPop = false;
						vm.$message.success(res.message);
						loading.close();
						vm.page = 1;
						vm.fetchChildAccountList();
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message.warning(msg);
						loading.close();
          })
				},
				// 清空表单
				clearFormData() {
					this.addAccountParam = {
						account: '',
						password: '',
						name: '',
						code: ''
					}
				},
				// 获取统计数据
				fetchDataAnalysis() {
					var vm = this;
					request('enterprise/index/all/summary', 'GET', '', function(res) {
            console.log(res);
						vm.summaryData = res.data;
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
          })
				},
				handleShowDeleteToast(index) {
					this.nowClickPos = index;
					this.showDeleteToast = true;
				},
				// 删除子账号
				confirmDelete() {
					var vm = this;
					request('enterprise/employee/' + this.accountList[this.nowClickPos].id, 'DELETE', '', function(res) {
            console.log(res);
						vm.$message.success(res.message);
						vm.showDeleteToast = false;
						vm.accountList.splice(vm.nowClickPos,1);
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
          })
				},
				// 禁止账号
				forbiddenAccount(pos) {
					var vm = this;
					var status = 0;
					if(this.accountList[pos].status === 0) {
						status = 1;
					}
					request('enterprise/employee/do_disable/' + this.accountList[pos].id, 'PUT', JSON.stringify({
						status 
					}), function(res) {
            // console.log(res);
						vm.$message.success(res.message);
						vm.accountList[pos].status = status;
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
          })
				},
				outPutData() {
					this.$message.warning('缺少接口');
				},
				changePage(){
					this.getPage($("#pageVal").val());
				},
				// 获取当前时间
				getNowTime() {
					var now = new Date();
					var yy = now.getFullYear(); //年
					var mm = now.getMonth() + 1; //月
					var dd = now.getDate(); //日
					var hh = now.getHours(); //时
					var ii = now.getMinutes(); //分
					var ss = now.getSeconds(); //秒
					var time = yy + ".";
					if (mm < 10) time += "0";
					time += mm + ".";
					if (dd < 10) time += "0";
					time += dd + " ";
					if (hh < 10) time += "0";
					time += hh + ":";
					if (ii < 10) time += '0';
					time += ii;
					// if (ss < 10) time += '0';
					// time += ss;
					this.updateTime = time;
				}
			}
		})
	</script>
</body>
</html>